<script lang="ts" setup>
/**
 * @/views/home/HomePage.vue
 * 描述 Home 页面
 */

/* 导入 */
import { ref, onMounted, onBeforeUnmount } from "vue";
import Slideshow from "@/views/home/components/Slideshow.vue";
import Viewshow from "@/views/home/components/Viewshow.vue";
import Info from "@/views/home/components/Info.vue";
import Logo from "@/views/home/components/Logo.vue";
import CalendarCard from "@/views/home/components/CalendarCard.vue";
import Telephone from "@/views/home/components/Telephone.vue";
import VideoCard from "@/views/home/components/VideoCard.vue";
import PlacardCard from "@/views/home/components/PlacardCard.vue";

/* 数据 */
const value = ref(new Date());
const windowWidth = ref(window.innerWidth); // 保存当前窗口宽度
const asideWidthThreshold = 1024; // 设置阈值, 超过此宽度显示 el-aside

/* 监听 */
// 监听窗口大小变化
const updateWindowWidth = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener("resize", updateWindowWidth);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateWindowWidth);
});
</script>

<template>
  <div id="homePage">
    <el-container>
      <!-- 主页视图 -->
      <el-main class="main">
        <el-space fill :size="20" style="width: 100%">
          <!-- 宣传轮播组件 -->
          <Slideshow />
          <!-- 风景轮播组件 -->
          <Viewshow />
          <!-- 简要信息组件 -->
          <Info />
        </el-space>
      </el-main>
      <!-- 侧面视图 -->
      <el-aside v-if="windowWidth >= asideWidthThreshold" width="21vw">
        <el-space wrap :size="20" direction="vertical">
          <!-- Logo 组件 -->
          <Logo />
          <!-- 电话卡片组件 -->
          <Telephone />
          <!-- 日历卡片组件 -->
          <CalendarCard />
          <!-- 视频卡片组件 -->
          <VideoCard />
          <!-- 海报卡片组件 -->
          <PlacardCard />
        </el-space>
      </el-aside>
    </el-container>
  </div>
</template>

<style scoped>
.main {
  padding-top: 0;
}
</style>
